// 车辆加油明细
<template>
  <div class="oilInlet-container">
    <van-nav-bar
      class="app-nav-bar"
      title="加油明细"
      left-arrow
      @click-left="$router.back()"
    />
    <van-search
      v-model="searchCar"
      show-action
      label="车牌号"
      placeholder="请输入要查询的车牌号"
      @search="onSearch(searchCar)"
    >
      <template #action>
        <div @click="onSearch(searchCar)">搜索</div>
      </template>
    </van-search>
    <el-table show-summary :data="list" border>
      <el-table-column prop="oil_sale_date" label="加油日期">
      </el-table-column>
      <el-table-column prop="driver" label="司机" width="80px">
      </el-table-column>
      <el-table-column prop="oiling_quantity" label="加油量" width="80px"> </el-table-column>
      <el-table-column prop="profit" label="盈利"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getOilSaleInfo } from '@/api/oilSale'
export default {
  name: 'oilDetailedIndex',
  components: {},
  props: {},
  data () {
    return {
      searchCar: '',
      list: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onSearch (val) {
      this.list = []
      // console.log(val)
      this.$toast.loading({
        message: '查询中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长ms 值为0时 toast不会消失
      })
      getOilSaleInfo({
        car_number: val
      }).then(res => {
        console.log('获取信息', res)
        if (res.data.data.length !== 0) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.list.push(res.data.data[i])
          }
          this.$toast.success('查询成功')
        } else {
          this.$toast.fail('输入有误')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onCancel () {
      console.log('取消')
    }
  }
}
</script>

<style scoped lang="scss">
.van-field {
  border-radius: 10px;
  // margin: 16px 0;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
</style>
